<template>
  <div class="afterInvest-detailsPage-chunk1 chunk">
    <!-- <div class="title">母盘净值</div>
    <div class="card">
      <div class="left">
        <chart2 v-if="investId&&info.investTime&&Object.keys(contrastOptions_obj).length" :contrastOptions_obj="contrastOptions_obj" id="chart2" :ids="investId" :id_index="id_index" 
        :height="280" width="100%" />
      </div>
      <div class="right">
        <el-table
          v-loading="listLoading2"
          :data="list2"
          border fit
          max-height="541"
          size="mini"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
        >
          <el-table-column prop="investAccount" label="账户" min-width="110" fixed></el-table-column>
          <el-table-column prop="investCustomerName" label="账户名称" min-width="160" :show-overflow-tooltip="true" fixed></el-table-column>
          <el-table-column prop="riskRate" label="风险度" min-width="100" align="center"></el-table-column>
          <el-table-column prop="earnestMoney" label="保证金占用" min-width="120" align="center"></el-table-column>
          <el-table-column prop="currentEquity" label="当前权益" min-width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="todayIncom" label="当日浮盈" min-width="80" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="growthRate" label="收益率" min-width="80" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span :class="scope.row.growthRate>=0?'positiveFc':'negativeFc'">{{ scope.row.growthRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column prop="latestNetWorth" label="最新净值" min-width="80" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="currentTradeDate" label="交易日期" width="100" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.currentTradeDate | parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div> -->

    <div class="title">子投资净值</div>
    <div class="card">
      <div class="left">
        <chart1 v-if="investId&&info.investTime&&Object.keys(contrastOptions_obj).length" :contrastOptions_obj="contrastOptions_obj" id="chart1" :ids="investId" :id_index="id_index" 
        :height="280" width="100%" />
      </div>
      <div class="right">
        <el-table
          v-loading="listLoading1"
          :data="list1"
          border fit
          max-height="541"
          size="mini"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;"
        >
          <el-table-column prop="investChildrenName" label="子投资" min-width="160" fixed show-overflow-tooltip>
            <template slot-scope="{row}">
              <span v-if="row&&row.hasNetWorth&&row.investStarttime" style="cursor: pointer;" v-afterStrategy="{id: row.id, userId, investId}">{{ row.investChildrenName }}</span>
              <span v-else style="cursor: pointer;color: #999;" @click="$message('该子投资无投后净值')">{{ row.investChildrenName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="strategyName" label="策略名称" min-width="160" fixed show-overflow-tooltip></el-table-column>
          <el-table-column prop="initialMoney" label="初始权益（万元）" min-width="120" align="center"></el-table-column>
          <el-table-column prop="initialShare" label="初始份额" min-width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="initialNetworth" label="最新净值" min-width="100" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column prop="investIncomeRate" label="收益率" min-width="120" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.investIncomeRate" :class="scope.row.investIncomeRate>0?'positiveFc':'negativeFc'">{{ scope.row.investIncomeRate }}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="currentDate" label="交易日期" min-width="100" align="center" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.currentDate | parseTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- <div class="column">
      <span>历史记录</span>
      <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk1}" @click="showChunk1=!showChunk1" />
    </div>
    <div v-show="showChunk1">
      <el-table
      v-loading="listLoading3"
      :data="list3"
      border fit
      size="mini"
      :header-cell-style="{background:'#dcedff',color:'#32639d'}"
      style="width: 100%;margin-top:20px;">
        <el-table-column prop="investAccount" label="账户" min-width="140"></el-table-column>
        <el-table-column prop="investCustomerName" label="账户名称" min-width="220" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="riskRate" label="风险度" min-width="100" align="center"></el-table-column>
        <el-table-column prop="earnestMoney" label="保证金占用" min-width="120" align="center"></el-table-column>
        <el-table-column prop="currentEquity" label="当前权益" min-width="120" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="todayIncom" label="当日浮盈" min-width="80" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="tradeDate" label="交易日期" width="100" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.tradeDate | parseTime }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div> -->

    <div style="height: 150px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { queryEquityHistory } from '@/api/afterInvest'
import chart1 from '@/components/Charts/afterInvest/afterInvest_1.vue'

export default {
  components: { chart1 },
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    },
    list1: {
      type: Array,
      default: () => {
        return []
      }
    },
    id_index: {
      type: Array,
      default: () => {
        return []
      }
    },
    contrastOptions_obj: {
      type: Object,
      default: () => {
        return {}
      }
    },
    listLoading1: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listLoading2: false,
      list2: [],
      listLoading3: false,
      list3: [],

      showChunk1: true,
    }
  },
  computed: {
    ...mapGetters(['userId'])
  },
  created() {
    this.investId = this.$route.query.id
    
    // this.queryEquityHistory(this.investId)
  },
  methods: {
    queryEquityHistory(investId) {
      this.listLoading3 = true
      queryEquityHistory({
        investId
      }).then(res => {
        console.log('queryEquityHistory', res)
        this.listLoading3 = false
        this.list3 = res.body
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.afterInvest-detailsPage-chunk1 {
  .title {
    width: 100%;
    line-height: 30px;
    background: #eee;
    margin-top: 20px;
    border: 1px solid #ddd;
    border-bottom: 0;
    padding-left: 8px;
  }
  .card {
    display: flex;
    border: 1px solid #ddd;
    padding-bottom: 15px;
    .left {
      width: 55%;
      margin-top: 12px;
    }
    .right { width: 45%; margin-top: 12px; }
  }
  .column {
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    margin-top: 30px;
    cursor: pointer;
    user-select: none;
    .el-icon { color: #4F95DD; font-weight: bold; margin-left: 6px; }
    .openChunk { transform: rotate(90deg); }
    &::before {
      display: inline-block;
      content: '';
      width: 6px;
      height: 26px;
      background: #42b983;
      margin-right: 6px;
    }
  }
}
</style>

